<!--
 * @Author: houmin 745762351@qq.com
 * @Date: 2023-09-11 08:56:50
 * @LastEditors: houmin 745762351@qq.com
 * @LastEditTime: 2023-12-03 16:22:59
 * @FilePath: \tch-h5\src\views\home\Home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import {
  ref,
  computed,
  watch,
  onActivated,
  reactive,
} from "vue";
import Banner from "./components/Banner.vue";
import Scenic from "@/views/home/components/Scenic.vue";
import QualityScenic from "@/views/home/components/QualityScenic.vue";
import { onBeforeRouteLeave, useRouter } from "vue-router";
import { showToast } from "vant";
import { showLoadingToast } from "vant";
import implant from "@/utils/implant.js";
import api from "@/api/index.js";

defineOptions({
  name: "home",
});
const scrollYEle = ref(null);
let scrollTop = 0;
onBeforeRouteLeave(() => {
  scrollTop = scrollYEle.value?.scrollTop || 0;
});
onActivated(async () => {
  const scrollElement = scrollYEle.value;
  scrollElement?.scrollTo({ top: scrollTop || 0, behavior: "instant" });
  await getCards();
});

implant();

const router = useRouter();
const loading = ref(false);
const goldenPandaInfo = reactive({});
const heiShuaCardInfo = reactive({});
const scenicActive = ref("attractionTickets");
const changeCategory = (key) => {
  scenicActive.value = key;
};

const update = ref(0);
const changeCity = () => {
  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
    loadingType: "spinner",
  });
  update.value += 1;
};
const onRefresh = () => {
  update.value += 1;
};

const qualityScenicLoading = ref(false);
const qualityScenicIsLoading = (e) => {
  qualityScenicLoading.value = e;
};

const scenicLoading = ref(false);
const scenicIsLoading = (e) => {
  scenicLoading.value = e;
};

const componentLoading = computed(() => {
  return qualityScenicLoading.value || scenicLoading.value;
});

watch(componentLoading, (key) => {
  if (!key) {
    loading.value = false;
    if (loading.value) {
      showToast("刷新成功");
    }
  }
});

const getCards = async () => {
  const { code, data } = await api.getHomeCard();
  if (code == 200) {
    goldenPandaInfo.value = data.goldenPandaVo || {};
    heiShuaCardInfo.value = data.heiShuaCardVos || {};
    data.heiShuaCardVos.map((el) => {
      if (el.isExpire === 0) localStorage.setItem("hasCard", true);
    });
  }
};

const goScenicListClick = () => {
	if(scenicActive.value === 'activityReservation' || scenicActive.value === 'sharedReservation'){
		router.push({
			path:'/activityReservation/list',
			query:{
				type: scenicActive.value
			}
		})
	}else{
		router.push({
		  path: "result/list",
		  query: {
			type: scenicActive.value,
		  },
		});
	}
};
</script>

<template>
  <div class="home">
    <div class="refresh_box" ref="scrollYEle">
      <van-pull-refresh
        class="van_pull_refresh"
        v-model="loading"
        @refresh="onRefresh"
      >
        <Banner
          :scenicActive="scenicActive"
          :update="update"
          @changeCity="changeCity"
        />
        <div class="category1">	
			<div class='tab-con'>
				<div
				  @click="changeCategory('activityReservation')"
				  :class="[
					scenicActive === 'activityReservation' ? 'tab_active' : '',
					'tab',
				  ]"
				>
				  <div
					v-show="scenicActive === 'activityReservation'"
					class="line"
				  ></div>
				  <span>活动预约</span>
				  <div
					v-show="scenicActive === 'activityReservation'"
					class="line line_borer"
				  ></div>
				</div>
				<img
				  v-show="scenicActive === 'activityReservation'"
				  class="active_bg_left active_bg"
				  src="@/assets/images/index/subtract1.png"
				  alt=""
				/>

				<div
				  @click="changeCategory('sharedReservation')"
				  :class="[
					scenicActive === 'sharedReservation' ? 'tab_active' : '',
					'tab',
				  ]"
				>
				  <div
					v-show="scenicActive === 'sharedReservation'"
					class="line"
				  ></div>
				  <span>共享预约</span>
				  <div
					v-show="scenicActive === 'sharedReservation'"
					class="line line_borer"
				  ></div>
				</div>
				<img
				  v-show="scenicActive === 'sharedReservation'"
				  class="active_bg_left active_bg"
				  src="@/assets/images/index/subtract1.png"
				  alt=""
				/>

				<div
				  @click="changeCategory('attractionTickets')"
				  :class="[
					scenicActive === 'attractionTickets' ? 'tab_active' : '',
					'tab',
				  ]"
				>
				  <div
					v-show="scenicActive === 'attractionTickets'"
					class="line"
				  ></div>
				  <span>景点门票</span>
				  <div
					v-show="scenicActive === 'attractionTickets'"
					class="line line_borer"
				  ></div>
				</div>
				<img
				  v-show="scenicActive === 'attractionTickets'"
				  class="active_bg_left active_bg"
				  src="@/assets/images/index/subtract1.png"
				  alt=""
				/>
			
				<div
				  @click="changeCategory('hotel')"
				  :class="[scenicActive === 'hotel' ? 'tab_active' : '', 'tab']"
				>
				  <div v-show="scenicActive === 'hotel'" class="line"></div>
				  <span>酒店</span>
				  <div
					v-show="scenicActive === 'hotel'"
					class="line line_borer"
				  ></div>
				</div>
				<img
			  v-show="scenicActive === 'hotel'"
			  class="active_bg_center active_bg"
			  src="@/assets/images/index/subtract2.png"
			  alt=""
				/>
			
				<div
			  @click="changeCategory('hotPot')"
			  :class="[scenicActive === 'hotPot' ? 'tab_active' : '', 'tab']"
				>
			  <div v-show="scenicActive === 'hotPot'" class="line"></div>
			  <!-- <span>餐饮</span> -->
			  <span>活动</span>
			  <div
				v-show="scenicActive === 'hotPot'"
				class="line line_borer"
			  ></div>
				</div>
				<img
			  v-show="scenicActive === 'hotPot'"
			  class="active_bg_right active_bg"
			  src="@/assets/images/index/subtract3.png"
			  alt=""
				/>
			</div>
        </div>
        <div>
          <QualityScenic
            :update="update"
            :scenicActive="scenicActive"
            @isLoading="qualityScenicIsLoading"
          />
          <div 
		  	v-if="scenicActive === 'hotPot'">
			<Scenic
              :update="update"
              :scenicActive="scenicActive"
              @isLoading="scenicIsLoading"
            />
          </div>
        </div>

      </van-pull-refresh>

      <div class="more" 
	  	v-if="scenicActive === 'attractionTickets' || 
	 	scenicActive === 'activityReservation' ||
	 	scenicActive === 'sharedReservation'" 
	  >
        <div
          v-if="!qualityScenicLoading"
          class="more_button"
          @click="goScenicListClick"
        >
          <img class="more_icon" src="@/assets/images/index/more.png" alt="" />
          <span>查看更多</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home {
  //overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  .refresh_box {
    flex: 1;
    overflow-y: auto;
    // background-color: #f9f8f3;
    .van_pull_refresh {
      // background-color: #f9f8f3;
    }
    .none {
      margin-top: 5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      .none_box {
        h4 {
          font-size: 1.4rem;
          color: #666666;
        }
      }
    }
    .more {
      display: flex;
      justify-content: center;
      // background-color: #f9f8f3;
      padding: 0.5rem 0 2rem 0;
      font-size: 1.4rem;
      color: #cccccc;
      text-align: center;
      .more_button {
        display: flex;
        align-items: center;
        height: 3.8rem;
        background: rgba(79, 172, 145, 0.06);
        border-radius: 0.5rem;
        border: 1px solid #4fac91;
        padding: 0 2.2rem;
        color: var(--van-primary-color);
        .more_icon {
          margin-right: 0.6rem;
          width: 1.5rem;
          height: 1.5rem;
        }
      }
      .more_button:active {
        background: rgb(236, 238, 236);
      }
    }
  }
  .category1 {
    position: absolute;
	top:20rem;
    // left: 1.5rem;
    // right: 1.5rem;
    // bottom: 0;
    height: 5rem;
    z-index: 10;
    margin: 1.5rem;
    // background-color: rgba(255, 255, 255, .3);
    background-color: #fff;
    backdrop-filter: blur(125px);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
	width:90%;
	
	.tab-con{
		overflow-y:scroll;
		width:auto;
    	display: flex;
    	align-items: center;
    	height: 5rem;
		border-radius:1rem;
	}

    .tab {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 1.6rem;
      color: #333333;
      text-align: center;
	  min-width:80px;
	  background:#c0c0c0;

      .line {
        width: 3.1rem;
        height: 0.5rem;
        border-radius: 0.4rem;
      }

      .line_borer {
        background: linear-gradient(
          90deg,
          var(--van-primary-color) 0%,
          #fbeaa8 92%
        );
      }
    }
	
	.tab_active{
		background:#fff;
	}

    .active_bg {
      position: absolute;
      top: 0;
      height: 5.2rem;
      z-index: -1;
    }

    .active_bg_left {
      left: 0;
    }
    .active_bg_center {
      left: 50%;
      transform: translate(-50%, 0);
    }

    .active_bg_right {
      right: 0;
    }
  }
//   .card-box {
//     width: 100%;
//     position: absolute;
//     margin-top: -50px;
//     z-index: 999;
//   }
}
</style>
